<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item label="시간선택">
          <MyCombinePiker :dateTimeRange="_dateTimeRange" @changeHandle="timePickChangeHandle" />
        </el-form-item>
        <el-form-item label="검색조건">
          <el-select v-model="searchForm.provider" placeholder="전체" clearable class="w-220px">
            <el-option label="EVO" value="EVO" />
            <el-option label="PP" value="PP" />
          </el-select>
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full" v-loading="loading">
      <MyTable :isPagination="false" :tableData="tableData" :tableColumn="tableColumn" v-slot="sp">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column v-if="sp.ctc.includes('날자')" label="날자" prop="date" align="center" />
          <el-table-column
            v-if="sp.ctc.includes('게임사')"
            label="게임사"
            prop="provider"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('총회원수')"
            label="총회원수"
            prop="all_players_cnt"
            align="center"
          >
            <template #default="{ row }">{{ formatNumber(row.all_players_cnt) }}</template>
          </el-table-column>
          <el-table-column
            v-if="sp.ctc.includes('신규회원')"
            label="신규회원"
            prop="new_players_cnt"
            align="center"
          >
            <template #default="{ row }">{{ formatNumber(row.new_players_cnt) }}</template>
          </el-table-column>
          <el-table-column
            v-if="sp.ctc.includes('입금회원')"
            label="입금회원"
            prop="recharge_players_cnt"
            align="center"
          >
            <template #default="{ row }">{{ formatNumber(row.recharge_players_cnt) }}</template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('입금액')"
            label="입금액"
            align="center"
            prop="recharge_sum"
            sortable
          >
            <template #default="{ row }">{{ formatNumber(row.recharge_sum) }}</template>
          </el-table-column>
          <el-table-column
            v-if="sp.ctc.includes('출금액')"
            label="출금액"
            prop="withdraw_sum"
            align="center"
            sortable
          >
            <template #default="{ row }">{{ formatNumber(row.withdraw_sum) }}</template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('배팅금액')"
            label="배팅금액"
            prop="bet_sum"
            align="center"
            sortable
          >
            <template #default="{ row }">{{ formatNumber(row.bet_sum) }}</template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('적중금액')"
            label="적중금액"
            prop="payout_sum"
            align="center"
            sortable
          >
            <template #default="{ row }">{{ formatNumber(row.payout_sum) }}</template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('입출손익금')" label="입출손익금" align="center">
            <template #default="{ row }">
              <el-tag :type="row.rechargeSubWithdraw > 0 ? 'danger' : 'success'">
                {{ formatNumber(row.rechargeSubWithdraw) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            v-if="sp.ctc.includes('손익금GGR')"
            label="손익금GGR"
            prop="net"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="row.net > 0 ? 'danger' : 'success'">
                {{ formatNumber(row.net) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { statTodayApi } from '@/api/statistic/index';
import { formatNumber, dataTimeRangeCurTwo, dateTransToSeoulTime } from '@/utils/util';
import MyTable from '@/components/MyTable';
import { useMyDateRange } from '@/hooks/useMyDateRange';
import MyCombinePiker from '@/components/MyCombinePiker';

const tableColumn = ref([
  '날자',
  '게임사',
  '총회원수',
  '신규회원',
  '입금회원',
  '입금액',
  '출금액',
  '배팅금액',
  '적중금액',
  '입출손익금',
  '손익금GGR'
]);

const _dateTimeRange = dataTimeRangeCurTwo(-30);

const searchForm = reactive({
  provider: '',
  start_ts: dateTransToSeoulTime(_dateTimeRange[0]),
  end_ts: dateTransToSeoulTime(_dateTimeRange[1])
});

const timePickChangeHandle = (timestamp: number, type: string) => {
  searchForm[type] = timestamp;
};

// const { dateTimeRange, dateTimeRangeChange } = useMyDateRange({
//     dateTimeRange: _dateTimeRange,
//     searchForm: searchForm,
// });

const dataCallBack = (data: any) => {
  const _data = data.data.stats;

  return _data.map((item: any) => {
    item.rechargeSubWithdraw = item.recharge_sum - item.withdraw_sum;
    return item;
  });
};

const { tableData, loading, resetParams, getList } = useTable({
  apiFn: statTodayApi,
  params: searchForm,
  callback: dataCallBack,
  isPageable: false
});
</script>

<style lang="scss" scoped></style>
